<template>
  <div id="app">
    <transition :name="transitionName">
    <router-view class="router-view"></router-view>
    </transition>
    
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      transitionName:''
    }
  },
  components: {
  },
  watch:{
    $route(to,from){
      if(to.meta.index >from.meta.index){
        this.transitionName = 'slide-left'
      } else if(to.meta.index < from.meta.index){
        this.transitionName = 'slide-right'
      }else{
        this.transitionName = ''
      }
    }
  }
}

</script>

<style lang="scss">
@import url('./common/style/mixin.scss');
@import url('./assets/libs/iconfont.css');

#app{
    width:100%;
  max-width:800px;
  height: 100%;
  margin: 0 auto;
  background: #fff;
  position: absolute;

}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active{
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}

.slide-right-enter{
  opacity:0;
  transform:translate3d(-100%,0,0);
}

.slide-right-leave-active{
  opacity: 0;
  transform:translate3d(100%,0,0);
}
.slide-left-enter{
  opacity: 0;
  transform: translate3d(100%,0,0);
}

.slide-left-leave-active{
  opacity: 0;
  transform:translate3d(-100%,0,0); 
}


</style>
